import React, {Component} from 'react'
import {View, Text, StyleSheet, TouchableOpacity} from 'react-native'
import Collapsible from 'react-native-collapsible'

import Icon from 'react-native-vector-icons/Ionicons'

class HeadingLine extends Component {
    static defaultProps = {
        title: '',
        style: {},
        contentStyle: {},
        header_right: undefined,
        foot_component: undefined,
        collapsible: true,
        color: 'white'        
    }

    constructor (props) {
        super(props)
        this.state = {
            isCollapsed: false
        }
    }


    //折叠
    fold = () => {
        if (!this.props.collapsible) return
        this.setState({
            isCollapsed: !this.state.isCollapsed
        })
    }

    childComponent = () => {
        return (
            React.Children.map(this.props.children, (child) => {
                return child
            })
        )
        
    }

    render () {
        return (
            <View style={{flex: 1}}>
                <TouchableOpacity style={[styles.heading_container, this.props.style]} onPress={this.fold}>
                    <View style={[styles.heading_line, {backgroundColor: this.props.color}]} />
                    <View style={styles.heading_content}>
                        <View style={{flex: 1, justifyContent: 'center', padding: 5}}>
                            <Text>{this.props.title}</Text>
                        </View>
                        <View style={{justifyContent: 'center'}}>
                            {this.props.header_right == undefined ? null : this.props.header_right()}
                        </View>
                        {this.props.collapsible ? ( 
                            <View style={{justifyContent: 'center', paddingLeft: 5}}>
                                <Icon name={this.state.isCollapsed ? 'ios-arrow-down' : 'ios-arrow-up'} size={15} />
                            </View>) : null
                        }
                       
                    </View>
                </TouchableOpacity>
                <View style={this.props.contentStyle}>
                    {
                        this.props.collapsible ? (
                            <Collapsible collapsed={this.state.isCollapsed} align="center">
                                {this.childComponent()}
                            </Collapsible>
                        ) : (<View>
                                {this.childComponent()}
                            </View>)
                    }
                    {
                        this.props.foot_component == undefined ? null : this.props.foot_component()                                                    
                    } 
                </View>
                
            </View> 
        )
    }
}

const styles = StyleSheet.create({
  
    heading_container: {
        flexDirection: 'row',
        paddingTop: 5,
        paddingBottom: 5
    },

    heading_line: {
        width: 3,
        marginTop: 10,
        marginBottom: 10,
        marginLeft: 10,
        borderBottomLeftRadius: 6,
        borderBottomRightRadius: 6,
        borderTopLeftRadius: 6,
        borderTopRightRadius: 6
    },

    heading_content: {
        flex: 1, 
        borderColor: 'grey', 
        padding: 5,
        flexDirection: 'row',
        justifyContent: 'center'
    }
  });


export default HeadingLine